@extends('layouts.admin')
@push('morecss')
    <link href="/vendor/AdminInspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
@endpush

@push('morescript')
    <script type="application/javascript">
        let page_params = {
            @can('admin.wxcardmemberlist.count')
            url_list: '{{ route('admin.wxcardmemberlist.count') }}',
            @endcan
            data_member_card:@json($memberCardList),
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxcardmemberlist_count.js') }}"></script>
@endpush
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight ecommerce">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="product_name">会员卡列表</label>
                        <select class="form-control" name="card_base_id" id="card_base_id"
                                v-model="searchParams.card_base_id">
                            <option value="0">请选择</option>
                            <option v-for="item in member_card" v-bind:value="item.card_base_id">@{{ item.title }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="col-sm-6">
                                <label class="control-label" for="keyword">开始时间</label>
                                <vue-datepicker-local
                                        v-model="start_time"
                                        format="YYYY-MM-DD HH:mm:ss" clearable
                                        placeholder="开始时间"></vue-datepicker-local>
                            </div>
                            <div class="col-sm-6">
                                <label class="control-label" for="keyword">结束时间</label>
                                <vue-datepicker-local
                                        v-model="end_time"
                                        format="YYYY-MM-DD HH:mm:ss" clearable
                                        placeholder="结束时间"></vue-datepicker-local>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" type="button" v-on:click="query"><i
                                        class="fa fa-search"></i>
                                搜索
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row text-left">
            <div class="col-lg-3" v-for="item in count_data">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        {{--<span class="label label-success pull-right">Monthly</span>--}}
                        <h5>@{{ item.name }}</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">@{{ item.count }}</h1>
                        {{--<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>--}}
                        {{--<small>Total income</small>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection